<div class="workflowRunStatus" *ngIf="workflowName">
    <nz-row>
        <nz-col [nzSpan]="18" [nzOffset]="3" *ngIf="workflowRun">
            <nz-card [nzTitle]="null" class="cardInfo"
                     [class.building]="workflowRun.status === pipelineStatusEnum.PENDING ||workflowRun.status === pipelineStatusEnum.BUILDING || workflowRun.status === pipelineStatusEnum.WAITING"
                     [class.success]="workflowRun.status === pipelineStatusEnum.SUCCESS"
                     [class.fail]="workflowRun.status === pipelineStatusEnum.FAIL || workflowRun.status === pipelineStatusEnum.STOPPED"
                     [class.inactive]="workflowRun.status === pipelineStatusEnum.DISABLED || workflowRun.status === pipelineStatusEnum.SKIPPED || workflowRun.status === pipelineStatusEnum.NEVER_BUILT">
                <nz-row>
                    <nz-col [nzSpan]="7">
                        <i nz-icon nzType="calendar" nzTheme="outline"></i>
                        <span>{{workflowRun.start | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}</span>
                    </nz-col>
                    <nz-col [nzSpan]="10" class="center">
                        <span>#{{workflowRun.num}}.{{workflowRun.last_subnumber}}</span>
                    </nz-col>
                    <nz-col [nzSpan]="7" class="alignRight">
                        <ng-container *ngIf="workflowRun.status !== pipelineStatusEnum.BUILDING && workflowRun.status !== pipelineStatusEnum.WAITING">
                            <i nz-icon nzType="calendar" nzTheme="outline"></i>
                            <span>{{workflowRun.last_execution | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}</span>
                        </ng-container>
                    </nz-col>
                </nz-row>
                <nz-row class="bordered">
                    <nz-col [nzSpan]="7">
                        <button nz-button *ngIf="direction === 'TB'" class="direction"
                                (click)="changeDirection()">
                            <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
                            Workflow layout
                        </button>
                        <button nz-button *ngIf="direction === 'LR'" class="direction"
                                (click)="changeDirection()">
                            <i nz-icon nzType="arrow-down" nzTheme="outline"></i>
                            Workflow layout
                        </button>
                    </nz-col>
                    <nz-col [nzSpan]="10" class="center">
                        <ng-container *ngIf="author">
                            <div>
                                <i nz-icon nzType="user" nzTheme="outline"></i>
                            </div>
                            {{author}}
                        </ng-container>
                    </nz-col>
                    <nz-col [nzSpan]="7" class="alignRight">
                        <button nz-button nzType="primary" nzDanger
                                [disabled]="loadingAction || !canExecute"
                                [class.loading]="loadingAction" (click)="stopWorkflow()"
                                *ngIf="workflowRun.status === pipelineStatusEnum.WAITING || workflowRun.status === pipelineStatusEnum.BUILDING">
                            Stop
                        </button>
                    </nz-col>
                </nz-row>
                <nz-row *ngIf="showInfos" class="bordered">
                    <nz-col [nzSpan]="18" [nzOffset]="3" class="center">
                        <button nz-button nz-tooltip nzTooltipTitle="This action will resend to your repository manager the current status of all your pipelines"
                                [nzLoading]="loadingAction"
                                (click)="resyncVCSStatus()">
                            <i nz-icon nzType="sync" nzTheme="outline"></i>
                            {{ 'workflow_resync_vcs' | translate }}
                        </button>
                    </nz-col>
                    <nz-col [nzSpan]="3" class="alignRight">
                        <button nz-button nzDanger nzType="primary"
                                [nzLoading]="loadingDelete" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this run ?"
                        (nzOnConfirm)="delete()">Delete</button>
                    </nz-col>
                </nz-row>
                <nz-row *ngIf="showInfos">
                    <nz-col [nzSpan]="20" [nzOffset]="2">
                        <div class="black scrollable">
                            <pre [innerHTML]="getSpawnInfos()"></pre>
                        </div>
                    </nz-col>
                </nz-row>
            </nz-card>
            <div class="semicircle" (click)="showInfos = !showInfos"
                 [class.building]="workflowRun.status === pipelineStatusEnum.PENDING || workflowRun.status === pipelineStatusEnum.BUILDING || workflowRun.status === pipelineStatusEnum.WAITING"
                 [class.success]="workflowRun.status === pipelineStatusEnum.SUCCESS"
                 [class.fail]="workflowRun.status === pipelineStatusEnum.FAIL || workflowRun.status === pipelineStatusEnum.STOPPED"
                 [class.inactive]="workflowRun.status === pipelineStatusEnum.DISABLED || workflowRun.status === pipelineStatusEnum.SKIPPED || workflowRun.status === pipelineStatusEnum.NEVER_BUILT">
                <i nz-icon nzType="down" nzTheme="outline" *ngIf="!showInfos"></i>
                <i nz-icon nzType="up" nzTheme="outline" *ngIf="showInfos"></i>
            </div>
        </nz-col>
    </nz-row>
</div>
